<div class="row-fluid">
  <div class="span2">
    <label class="small">Field <tip>This is the facet field.</tip></label>
    <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)">
  </div>
  <div class="span2">
    <label class="small">Length <tip>Specify a maximum number of terms to display (Top N).</tip></label>
    <input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
  </div>
  <div class="span2">
    <label class="small">Sort by</label>
    <select ng-change="set_refresh(true)" class="input-small"
            ng-model="panel.sortBy"
            ng-options="f for f in ['count','index']"></select>
  </div>
  <div class="span3">
    <label class="small">Order</label>
    <!-- <select class="input-medium" ng-model="panel.order" ng-options="f for f in ['count','term','reverse_count','reverse_term']" ng-change="set_refresh(true)"></select></span> -->
    <select class="input-medium"
            ng-model="panel.order"
            ng-options="f for f in ['descending','ascending']"
            ng-change="set_refresh(true)"></select>
  </div>
  <div class="span4">
    <label class="small">Use field values as chart's colors <tip placement="bottom">If the field values are not valid HTML colors (either color names or hexadecimal colors), the default colors for chart will be used for the data series instead.</tip></label>
    <input type="checkbox" ng-model="panel.useColorFromField" ng-checked="panel.useColorFromField" ng-change="set_refresh(true)">
  </div>
 
  <div class="span4">
    <label class="small">Exclude Terms(s) (comma seperated)</label>
    <input array-join type="text" ng-model='panel.exclude' ng-change="set_refresh(true)"></input>
  </div>
</div>
<div class="row-fluid">
  <div class="span2">
    <label class="small">Style</label>
    <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span>
  </div>
  <div class="span2" ng-show="panel.chart == 'table'">
    <label class="small">Font Size</label>
    <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
  </div>
  <div class="span2" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
    <label class="small">Legend</label>
    <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','left','right','none']"></select></span>
  </div>
  <div class="span3" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
    <label class="small" >Legend Format</label>
    <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
  </div>
  <div class="span1">
    <label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing">
  </div>
  <div class="span1">
    <label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other">
  </div>
  <div class="span1" ng-show="panel.chart == 'pie'">
    <label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
  </div>
  <div class="span1" ng-show="panel.chart == 'pie'">
    <label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
  </div>
  <div class="span1" ng-show="panel.chart == 'pie'">
    <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
  </div>
  <div class="span2" ng-show="panel.chart == 'bar'">
    <label class="small">Log axis</label><input type="checkbox" ng-model="panel.logAxis" ng-checked="panel.logAxis">
  </div>
</div>
<div class="row-fluid">
  <div class="span2">
    <label class="small">Mode <tip data-placement="right">For min, mean, max, and sum modes. Field type has to be numeric.</tip></label>
    <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','sum']"></select>
  </div>
  <div class="span2" ng-show="panel.mode != 'count'">
    <label class="small">Stats Field <tip>This is the field that contains numerical values.</tip></label>
    <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.stats_field" ng-change="set_refresh(true)">
  </div>
  <div class="span3">
    <label class="small">Display Precision <tip>The number of digits to display after the decimal point.</tip></label>
    <select class="input-mini" ng-model="panel.decimal_points" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9]"></select>
  </div>
</div>
<div class="row-fluid">
  <div class="span12">
    <label class="small">Default Colors for Chart <tip>Comma separated values of color (no quote). HTML color names or hexadecimal colors are allowed (e.g. red, #FF0000, #F00 and etc). The chart series will get a color from these color values.</tip></label>
    <textarea class="input-xxlarge" type="text" ng-model="panel.chartColors" ng-list></textarea>
  </div>
</div>
<div class="row-fluid">
  <h5>Real-time (Auto-refresh)</h5>  
  <div class="span1">
    <label class="small">Enable</label><input type="checkbox" ng-model="panel.refresh.enable" ng-checked="panel.refresh.enable">
  </div>
  <div class="span2">
    <label class="small">Interval (seconds) <tip>The minimum value is 2.</tip></label>
    <input type="number" min="2" class="input-mini" ng-model="panel.refresh.interval">
  </div>
</div>